<template>
	<div class="fav-wrap">
		<h3 class="title">猜你喜欢</h3>
		<ul class="fav-list">
			<li class="fav-item" v-for="item of favList" :key="item.id">
				<div class="img-wrap">
					<img class="img-item" :src="item.imgUrl" alt="猜你喜欢">
				</div>
				<div class="desc-wrap">
					<div class="desc-title">{{item.title}}</div>
					<div class="comment">{{item.comment}}条评论</div>
					<div class="desc-price">
						<span class="price">￥{{item.price}}</span>
						<span class="place">{{item.place}}</span>
					</div>
				</div>
			</li>
		</ul>
	</div>
</template>
<script>
	export default{
		name:"HomeYoufav",
		props:{
			favList:Array
		}
	}
</script>
<style lang="less" scoped>
	@import '~less/common/fun.less';
	@import '~less/common/base.less';
	.fav-wrap{
		margin-top: .3rem;
		background: #fff;
		.title{
			padding: .26rem .2rem;
			position: relative;
		}
		.fav-item{
			display: flex;
			padding-left: .2rem;
			padding-bottom:.3rem;
			.img-wrap{
				width: 2rem;
				height: 2rem;
				.img-item{
					width:100%;
				}
			}
			.desc-wrap{
				flex: 1;
				min-width: 0;
				padding-left: .2rem;
				.desc-title,.comment,.desc-price{
					.ellipsis();
					margin-top: .24rem;
				}
				.comment{
					font-size: .24rem;
				}
				.desc-price{
					display: flex;
					.price{
						color:@priceColor;
						.ellipsis();
						flex: 1;
					}
					.place{
						width: 1rem;
						.ellipsis();
						font-size: .24rem;
						color:#666;
					}
				}
			}
		}
	}
</style>